<template>
  <div class="container row between centered with_shadow">
    <div class="left column between">
      <div class="timeString row">
        <div>
          <span>
            <md-icon class="icon" name="time"></md-icon>
          </span>
          {{timeString}}出发
        </div>
        <div class="desc">{{ value.carRemark }}</div>
      </div>
      <div class="timeString">
        <span>
          <md-icon class="icon" name="shangchedian"></md-icon>
        </span>
        {{ value.originShortAddress }}
      </div>
      <div class="timeString">
        <span>
          <md-icon class="icon" name="xiachedian"></md-icon>
        </span>
        {{ value.destShortAddress }}
      </div>
      <div class></div>
    </div>
    <div class="right">{{ value.orderStatus }}</div>
  </div>
</template>
<script>
import '@/assets/svgs/time.svg';
import '@/assets/svgs/shangchedian.svg';
import '@/assets/svgs/xiachedian.svg';
import { Icon } from 'mand-mobile';
import Moment from 'moment';
export default {
  name: 'standby-order-item',
  components: {
    [Icon.name]: Icon
  },
  props: {
    value: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      timeString: ''
    };
  },
  created() {
    let startTime = Moment(parseInt(this.value.orderDate));
    this.timeString = startTime.calendar();
  }
};
</script>
<style lang="stylus" scoped>
.container {
  width: 100%;
  height: 156px;
  font-size: 24px;
  color: #666666;
  padding: 20px;
  box-sizing: border-box;
  border-bottom: 1px solid color-primary-background;
  border-radius: 10px;
  background-color: #fff;

  .desc {
    margin-left: 6px;
    border-radius: 6px;
    border: 1px solid color-primary-background;
    padding: 2px 8px;
    font-size: 20px;
    color: #999999;
    line-height: 24px;
    box-sizing: border-box;
  }

  .icon {
    width: 16px;
    height: 16px;
    margin-right: 6px;
  }

  .left {
    height: 100%;
  }

  .right {
    font-size: 24px;
  }
}
</style>
